<template>
  <div class="pageBox">
    <head-component title="提交订单"></head-component>
    <div class="addressBox flex-between" @click="goMyAddr">
      <div class="address flex-row" v-if="address.id">
        <img class="dizhi_icn" src="@/image/home/dizhi_icn.png" alt="" />
        <div class="addr">
          <div class="addrTop flex-row">
            <p>{{ address.name }}</p>
            <span>{{ address.mobile }}</span>
          </div>
          <div class="addrBom">
            {{ address.province }}{{ address.city }}{{ address.area
            }}{{ address.address }}
          </div>
        </div>
      </div>
      <div class="address flex-row" v-else>
        <img class="dizhi_icn" src="@/image/home/dizhi_icn.png" alt="" />
        <div class="addr">
          <div class="addrTop flex-row">
            <p>请添加地址</p>
          </div>
        </div>
      </div>
      <img
        class="youjiantou2_btn"
        src="@/image/home/youjiantou2_btn.png"
        alt=""
      />
    </div>

    <div class="goodsInfoBox">
      <div class="popupTop flex">
        <img class="popupTopImg" :src="goodsImg" alt="" />
        <div class="popupRight flex-center">
          <p>￥{{ nowPrice }}</p>
          <span>{{ details.title }}</span>
          <div class="sku flex" v-if="hasoption == 1">
            <div class="skuItem" v-for="item in specsList" :key="item.id">
              {{ item.specsTitle }}：{{ item.title }}
            </div>
          </div>
        </div>
      </div>

      <div class="stepBox flex-between">
        <p>购买数量</p>
        <van-stepper v-model="stepValue" @change="stepChange" />
      </div>

      <div class="payWay flex-between" @click="onPayWay">
        <p>支付方式</p>
        <span>{{ actionsText }}</span>
      </div>

      <div class="totalBox flex-row">
        <p>共{{ stepValue }}件商品，合计</p>
        <span>￥{{ totalPrice }}</span>
      </div>
    </div>

    <div class="bottom flex-between">
      <div class="totalBox2 flex-row">
        <p>共{{ stepValue }}件商品，</p>
        <p>合计：</p>
        <span>￥{{ totalPrice }}</span>
      </div>
      <button class="buy" @click="onBuy">立即购买</button>
    </div>

    <van-action-sheet
      v-model:show="show"
      :actions="actions"
      :close-on-click-action="true"
      cancel-text="取消"
      @cancel="onCancel"
      @select="onSelect"
    />
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";
import { post } from "../../untils/request";
// import { isAndroid } from "../../untils/common";
// import { Toast } from "vant";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const stepValue = ref(
      router.currentRoute.value.query.num
        ? router.currentRoute.value.query.num
        : "1"
    ); // 步进器 购买数量
    const goodsId = ref(
      router.currentRoute.value.query.goodsId
        ? router.currentRoute.value.query.goodsId
        : ""
    ); // 商品id
    const specsId = ref(
      router.currentRoute.value.query.specsId
        ? router.currentRoute.value.query.specsId
        : ""
    ); // 规格拼接的id

    const specsList = ref(
      router.currentRoute.value.query.specsList
        ? JSON.parse(router.currentRoute.value.query.specsList)
        : ""
    ); // 规格列表

    const addressId = ref(
      localStorage.getItem("addressId") ? localStorage.getItem("addressId") : ""
    ); // 地址id

    const address = ref({}); // 地址信息

    const details = ref({}); // 商品详情
    const hasoption = ref(0); // 是否启用规格1：启用 0：不启用

    const goodsImg = ref(""); // 商品图片
    const nowPrice = ref(""); // 商品价格现价
    const totalPrice = ref(""); // 商品合计

    const orderNo = ref(""); // 订单号

    const show = ref(false); // 是否显示弹窗
    const actionsText = ref("余额支付");
    const actionsId = ref("1");
    const actions = [
      {
        name: "余额支付",
        id: "1",
      },
      // {
      //   name: "微信支付",
      //   id: "2",
      // },
    ];

    // 获取商品详情
    function getDetails() {
      post("/portal/Shop", {
        module: "Goods",
        interface: "2001",
        data: {
          id: goodsId.value,
          lat: "0",
          lng: "0",
        },
      }).then((res) => {
        console.log("商品详情：", res);
        details.value = res.data;
        hasoption.value = res.data.hasoption;
        if (res.data.hasoption == 0) {
          goodsImg.value = res.data.thumbUrl;
          nowPrice.value = res.data.marketprice;
        } else {
          res.data.optionList.forEach((item) => {
            if (item.specs == specsId.value) {
              goodsImg.value = item.thumb ? item.thumb : res.data.thumbUrl;
              nowPrice.value = item.marketprice;
            }
          });
        }
        totalPrice.value = nowPrice.value * stepValue.value;
      });
    }
    getDetails();

    // 提交订单
    function onBuy() {
      post("/portal/Shop", {
        module: "Goods",
        interface: "6001",
        data: {
          goodsId: goodsId.value,
          specsId: hasoption.value == 1 ? specsId.value : "",
          num: stepValue.value,
          addressId: addressId.value,
          couponId: 0,
          remark: "",
        },
      }).then((res) => {
        orderNo.value = res.data.orderNo;
        orderPay();
        // wechatPay()
      });
    }

    //订单支付 余额支付
    function orderPay() {
      post("/portal", {
        module: "Pay",
        interface: "1000",
        data: {
          order_no: orderNo.value,
        },
      }).then((res) => {
        console.log("订单支付", res);
        router.replace("/paySuccess");
      });
    }

    // 获取支付参数
    // function wechatPay() {
    //   console.log("支付参数");
    //   if(isAndroid) {
    //     wxAppPay(res.data.charge, res.data.orderNo).then((code) => {
    //           if (code) {
    //             Toast("支付成功");
    //             setTimeout(() => {
    //             router.replace("/paySuccess");
    //             }, 1500);
    //           } else {
    //             Toast("支付失败");
    //           }
    //         });
    //   }
    // }

    /**
     * 微信支付
     * 方法名 wxpay (String json)
     * 格式:{"app_response":"微信返回的 json"}
     * javascript:payresult(1)
     * 回调 js 1是成功, 0是失败
     * @param {String} params 支付参数
     * @extends {Promise<Number>} 异步支付结果
     */
    // function wxAppPay(params, orderNo) {
    //   return new Promise((resolve, reject) => {
    //     window.payresult = (code) => {
    //       if (code == 1) {
    //         resolve(code);
    //       } else {
    //         reject(code);
    //       }
    //     };
    //     if (window.test && window.test.wxpay) {
    //       let json = JSON.stringify({ app_response: params });
    //       window.test.wxpay(json);
    //     } else {
    //       reject(-1);
    //     }
    //   });
    // }

    // 步进器改变
    function stepChange(value) {
      totalPrice.value = value * nowPrice.value;
    }

    function goMyAddr() {
      router.push({
        path: "/myAddr",
        query: {
          addNum: 1,
        },
      });
    }

    function getAddress() {
      if (!addressId.value) {
        return;
      }
      post("/portal", {
        module: "Address",
        interface: "2002",
        data: {
          id: addressId.value,
        },
      })
        .then((res) => {
          console.log("地址详情", res);
          address.value = res.data;
        })
        .catch(() => {
          localStorage.removeItem("addressId");
        });
    }
    getAddress();

    function onPayWay() {
      show.value = true;
    }

    function onSelect(item) {
      show.value = false;
      actionsText.value = item.name;
      actionsId.value = item.id;
    }
    function onCancel() {
      show.value = false;
    }
    return {
      stepValue,
      goodsId,
      specsId,
      details,
      goodsImg,
      hasoption,
      nowPrice,
      totalPrice,
      specsList,
      addressId,
      address,
      orderNo,
      show,
      actions,
      actionsText,
      actionsId,
      onBuy,
      getDetails,
      stepChange,
      goMyAddr,
      getAddress,
      // wechatPay,
      // wxAppPay,
      onPayWay,
      onSelect,
      onCancel,
      orderPay,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  padding-top: 88px;
  background-color: #f5f5f5;
  padding-bottom: 88px;
  .addressBox {
    margin-top: 20px;
    padding: 50px 30px;
    background-color: #fff;
    .address {
      .dizhi_icn {
        width: 61px;
        height: 73px;
      }
      .addr {
        padding-left: 12px;
        .addrTop {
          p {
            font-size: 36px;
            font-weight: 500;
            color: #2e3033;
            margin-right: 20px;
          }
          span {
            font-size: 30px;
            font-weight: 400;
            color: #999999;
          }
        }
        .addrBom {
          font-size: 26px;
          font-weight: 400;
          color: #999999;
          margin-top: 10px;
        }
      }
    }
    .youjiantou2_btn {
      width: 36px;
      height: 36px;
    }
  }
  .goodsInfoBox {
    margin-top: 20px;
    background-color: #fff;
    padding: 40px 30px;
    .popupTop {
      width: 100%;
      .popupTopImg {
        width: 180px;
        height: 180px;
        border-radius: 16px;
      }
      .popupRight {
        padding-left: 20px;
        flex-direction: column;
        p {
          width: 100%;
          font-size: 36px;
          font-weight: 500;
          color: #e00b12;
          margin-bottom: 10px;
        }
        span {
          width: 100%;
          font-size: 28px;
          font-weight: 400;
          color: #333333;
        }
        .sku {
          width: 100%;
          flex-wrap: wrap;
          justify-content: flex-start;
          margin-top: 10px;
          .skuItem {
            font-size: 26px;
            font-weight: 400;
            color: #999999;
            margin-right: 50px;
          }
        }
      }
    }
    .stepBox {
      margin-top: 37px;
      p {
        font-size: 26px;
        font-weight: 400;
        color: #666666;
      }
    }
    .payWay {
      margin-top: 38px;
      p {
        font-size: 26px;
        font-weight: 400;
        color: #666666;
      }
      span {
        font-size: 26px;
        font-weight: 400;
        color: #333333;
      }
    }
    .totalBox {
      margin-top: 60px;
      justify-content: flex-end;
      p {
        font-size: 26px;
        font-weight: 400;
        color: #999999;
      }
      span {
        font-size: 26px;
        font-weight: 400;
        color: #e00b12;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 88px;
    background: #ffffff;
    box-shadow: 0px -1px 0px 0px #dadee6;
    position: fixed;
    left: 0;
    bottom: 0;
    .totalBox2 {
      justify-content: flex-end;
      padding-left: 30px;
      p:nth-of-type(1) {
        font-size: 26px;
        font-weight: 400;
        color: #999999;
      }
      p:nth-of-type(2) {
        font-size: 26px;
        font-weight: 400;
        color: #333333;
      }
      span {
        font-size: 26px;
        font-weight: 400;
        color: #e00b12;
      }
    }
    .buy {
      width: 220px;
      height: 88px;
      background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
      font-size: 28px;
      font-weight: 500;
      color: #ffffff;
      border: none;
    }
  }
}
</style>